<template>
  <div>
    姓名：<input type="text" v-model="name">
    性别：<input type="text" v-model="sex">
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, watchEffect } from 'vue';

let name = ref('孙悟空')
const sex = ref('男')
// 监听单个属性
// 语法：watch（变量，(新数据，旧数据)=>{}）
watch(name, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
// 监听多个属性
watch([name, sex], (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

// watchEffect 默认监听所有的变量
// 默认初始化监听一次 自动收集依赖
watchEffect(() => {
  console.log(sex.value, '--------')
})
</script>

<style lang="scss" scoped></style>